//入口文件
import Vue from 'vue'
//1.导入路由的包
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter);

//导入时间插件
import moment from 'moment'
//定义全局过滤器
Vue.filter('dateFormat',
  function (datastr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(datastr).format(pattern);
  });

//2.导入vue-resource
import VueResource from 'vue-resource'
//安装vue-resource
Vue.use(VueResource);
//设置请求根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005';
//全局设置post时候表单数据格式组织形式 application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;

//导入vuex
import Vuex from 'vuex'
//注册vuex
Vue.use(Vuex);

//导入MUI样式
import './lib/mui/css/mui.min.css'
//小图标样式
import './lib/mui/css/icons-extra.css'
//按需导入Mint-UI的组件
/*import {Header, Swipe, SwipeItem, Button, Lazyload} from 'mint-ui'
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
Vue.component(Button.name, Button);
Vue.use(Lazyload);*/
import MUI from 'mint-ui'//需要完整引入，才能使lazyload生效
Vue.use(MUI);

//导入 vue-preview插件
import VuePreview from 'vue-preview'

Vue.use(VuePreview);

import 'mint-ui/lib/style.min.css'
//导入router.js路由模块
import router from './router.js'
//导入App根组件
import app from './App.vue'


//将localstorage里的car获取到state中
let car = JSON.parse(localStorage.getItem('car') || '[]');
let store = new Vuex.Store({
  state: {
    //相当于data，用来存储数据
    //在组件中访问state里的数据，使用this.$store.state.*
    car: car//将购物车中商品的数据对象，存入数组{id:商品id, count:数量, price:单价, selected:选中状态}
  },
  mutations: {
    //this.$store.commit('方法名'，参数)
    addToCar(state, goodsinfo) {
      //点击加入购物车，把商品数据对象保存到car数组里
      //1.如果购物车中已经就这个商品对象，就只修改数量
      //2.如果购物车中没有这个商品对象，push到数组里
      var flag = false;//默认没有找到
      state.car.some(item => {
        if (item.id === goodsinfo.id) {
          item.count += parseInt(goodsinfo.count);
          flag = true;
          return true;
        }
      });
      if (!flag) {
        state.car.push(goodsinfo);
      }

      //把car数组存储到本地localstorage
      localStorage.setItem('car', JSON.stringify(state.car));

    },
    updateGoodsCount(state, goodsinfo) {
      //在购物车页面修改商品数量
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count);
          return true;
        }
      });

      localStorage.setItem('car', JSON.stringify(state.car));
    },
    removeFromCar(state, id) {
      //根据id删除store里的商品数据
      state.car.some((item, index) => {
        if (item.id === id) {
          state.car.splice(index, 1);
          return true;
        }
      });
      localStorage.setItem('car', JSON.stringify(state.car));
    },
    updateGoodsSelected(state, goodsinfo) {
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.selected = goodsinfo.selected;
          return true;
        }
      });
      localStorage.setItem('car', JSON.stringify(state.car));
    }
  },
  getters: {
    //this.$store.getters.方法名

    //相当于计算属性computed
    getAllCount(state) {
      //计算所有商品的数量
      let c = 0;
      state.car.forEach(item => {
        c += item.count;
      });
      return c;
    },
    getGoodsCount(state) {
      //创建这么一个对象{id: count} 商品id和数量的对象
      let obj = {};
      state.car.forEach(item => {
        obj[item.id] = item.count;
      });
      return obj;
    },
    getGoodsSelected(state) {
      //创建这么一个对象{id: selected} 商品id和选中状态
      let obj = {};
      state.car.forEach(item => {
        obj[item.id] = item.selected;
      });
      return obj;
    },
    getGoodsCountandAndAmount(state) {
      let obj = {
        count: 0,//选中的数量
        amount: 0//选中的总价
      };
      state.car.forEach(item => {
        if (item.selected) {
          obj.count += item.count;
          obj.amount += item.price * item.count;
        }
      });
      return obj;
    }
  }
});

let vm = new Vue({
  el: '#app',
  render: c => c(app),
  //挂载路由到Vue实例上
  router,
  //挂载store到Vue实例上
  store
});

//new Vuex.Store()实例，得到一个数据仓储对象
